<template>
  <view>
    <!-- 用户信息 -->
    <view class="userinfo">
      <template v-if="false">
        <!-- 头像模糊背景 -->
        <image class="avatar-bg" :src="userAvatar || defaultSrc" mode="aspectFill" />
        <!-- 头像 -->
        <view class="avatar">
          <image class="img-avatar" :src="userAvatar || defaultSrc" mode="aspectFill" />
          <button v-if="!avatarUrl" class="btn-avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
            获取头像
          </button>
        </view>

        <!-- 昵称 -->
        <input :value="'用户昵称'" @blur="getNickname" class="nickname" type="nickname" />
      </template>
      <template v-else>
        <button  @click="wxlogin" type="primary">用户登录</button>
        <!-- 测试  是否只有/my/的请求头中添加了token -->
        <button type="primary" @click="testToken">测试按钮,token添加</button>
      </template>
    </view>
    <!-- 订单导航 -->
    <view class="nav">
      <view class="nav-item" v-for="item in nav" :key="item.type">
        <u-icon size="50rpx" :name="item.icon"></u-icon>
        <text class="nav-text">{{ item.title }}</text>
      </view>
    </view>
    <!-- 单元格 -->
    <view class="cell">
      <u-cell-group :border="false">
        <u-cell icon="kefu-ermai" value="10086">
          <view class="cell-title" slot="title">
            联系客服
            <button class="cell-button" open-type="contact">客服按钮</button>
          </view>
        </u-cell>
        <u-cell icon="edit-pen">
          <view class="cell-title" slot="title">
            意见反馈
            <button class="cell-button" open-type="feedback">反馈按钮</button>
          </view>
        </u-cell>
        <u-cell icon="setting">
          <view class="cell-title" slot="title">
            系统设置
            <button class="cell-button" open-type="openSetting">设置</button>
          </view>
        </u-cell>
        <u-cell icon="info-circle" value="v1.0.0">
          <view class="cell-title" slot="title">当前版本</view>
        </u-cell>
      </u-cell-group>
      <button type="warn" plain>退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // avatarUrl: '',
      userAvatar: '',
      nickName: '',
      // 默认图片地址
      defaultSrc:
        'https://img0.baidu.com/it/u=324754129,1809452373&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=500',
      nav: [
        { type: 1, icon: 'order', title: '全部订单' },
        { type: 2, icon: 'rmb-circle', title: '待付款' },
        { type: 3, icon: 'car', title: '待收货' },
        { type: 4, icon: 'reload', title: '退货/退款' },
      ],
    };
  },
  methods: {
    chooseAvatar(e) {
      console.log(e);
    },
    getNickname(e) {
      console.log(e);
    },
    // 核心步骤 - 掌握小程序的登录实现
    // 调用uni.getUserInfo获取加密的用户信息
    // 调用uni.login获取code码
    // 根据以上两个api的返回作为参数发送请求

    // 用户登录
    async wxlogin() {
      // console.log(this.$store.state.user.token);
      // 组件里调用模块里面的 mutation，格式： 模块名/mutation名
      // this.$store.commit('user/setToken', 456);

      // 微信小程序自己的登录
      // 获取code码
      const res = await uni.login();
      console.log(res[1]);

      // 获取用户信息
      const res2 = await uni.getUserInfo();
      console.log(res2[1]);

      // data是我们自己开发服务器需要的 请求参数
      // 定义请求参数
      const data = {
        code: res[1].code,
        encryptedData: res2[1].encryptedData,
        rawData: res2[1].rawData,
        iv: res2[1].iv,
        signature: res2[1].signature,
      };

      console.log(data);

      // 发送请求
      const res3 = await uni.$u.http.post('/users/wxlogin', data);
      console.log(res3);
      // 持久化存储 保存token到vuex
      // 个人的appid账号原因，导致请求会失败，我们可以在下面写假数据
      this.$store.commit('user/setToken', res3.data.message.token);
      // this.$store.commit('user/setToken', 'asdfasdfsad.sdfasdf.asdfasd');
    },
    // 
    async testToken() {
      // /my/orders/all
      const res_cesi = await uni.$u.http.get('/my/orders/all', { params: { type: 1 } });
      console.log(res_cesi);
    }
  },
};
</script>

<style lang="scss">
// 页面背景
page {
  background-color: #f9f9f9;
}
// 用户信息
.userinfo {
  height: 330rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .avatar-bg {
    z-index: -1;
    width: 120%;
    height: 120%;
    position: absolute;
    // 滤镜: 模糊
    filter: blur(30rpx);
    left: -10%;
    top: -10%;
  }
  .avatar {
    position: relative;
    border-radius: 50%;
    width: 172rpx;
    height: 172rpx;
    .img-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .btn-avatar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }
  }
  .nickname {
    color: #fff;
    margin-top: 20rpx;
    text-shadow: 2rpx 2rpx 10rpx #333;
    text-align: center;
  }
}

// 导航列表
.nav {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  height: 144rpx;
  display: flex;
  justify-content: space-around;
  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .nav-text {
      font-size: 26rpx;
      margin-top: 16rpx;
      color: #474747;
    }
  }
}

// 单元格
.cell {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  height: 520rpx;
  .cell-title {
    position: relative;
    .cell-button {
      // 透明度为 0
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}
</style>
